<style lang="less">
     @import './index.less';
</style>

<template>
  <div>
    <Button icon="reply" type="text" @click="goForward">上一步</Button>
    <Card dis-hover>
      <Row :gutter="10">
        <i-col span="18">
          <h2>{{mes.contract_number}}的回款记录
              <Tag color="blue" type="border" class="margin-left-10 margin-bottom-8">{{mes.status}}</Tag>
          </h2>
        </i-col>
      </Row>
      <div class="box">
        <Row :gutter="15">
          <i-col span="6">
            <p>对应客户:{{mes.customer_name}}</p>
          </i-col>
          <i-col span="6">
            <p>合同编号:{{mes.contract_number}}</p>
          </i-col>
          <i-col span="5">
            <p>合同名称:{{mes.contract_name}}</p>
          </i-col>
        </Row>
        <Row :gutter="15">
          <i-col span="6">
            <p>合同负责人:{{mes.responsible_name}}</p>
          </i-col>
          <i-col span="6">
            <p>所属部门:{{mes.org_name}}</p>
          </i-col>
        </Row>
      </div>
    </Card>
    <Row :gutter="10" class="margin-top-10">
      <i-col span="17">
        <Card dis-hover>
          <Tabs value="1">
            <!-- <TabPane label="基本信息" name="1">
              <Row class="margin-bottom-10">
                <i-col span="10" offset="2">
                  <span>回款时间：{{mes.backpayment_date}}</span>
                </i-col>
              </Row>
              <Row class="margin-bottom-10">
                <i-col span="10" offset="2">
                  <span>回款金额{{mes.backpayment_amount}}</span>
                </i-col>
              </Row>
              <Row class="margin-bottom-10">
                <i-col span="10" offset="2">
                  <span>对应期次：{{mes.receivable_count}}</span>
                </i-col>
              </Row> -->
            </TabPane>
            <TabPane label="回款记录" name="1">
              <Table :columns="columns" :data="mes.receivablebackpayments"></Table>
              <Row>
                <i-col span="4" offset="20">
                   <h4 class="margin-top-10  margin-bottom-8">总计: {{mes.backpayment_amount}} 元</h4>
                </i-col>
              </Row>
            </TabPane>
          </Tabs>
        </Card>
      </i-col>
      <i-col span="7">
        <Card dis-hover>
          <Tabs value="1">
            <TabPane label="动态" name="1">
              <p>动态里的内容</p>
            </TabPane>
          </Tabs>
        </Card>
      </i-col>
    </Row>    
  </div>
</template>

<script>
export default {
  data() {
    return {
      mes:{},
      columns:[
        {
          title:'序号',
          type:'index',
          align:'center'
        },{
          title:'应收周期',
          align:'center',
          key:'count'
        },{
          title:'预计回款金额(元)',
          align:'center',
          key:'receivable_amount'
        },{
          title:'实际回款金额(元)',
          align:'center',
          key:'amount'
        }
      ]
    }
  },
  methods:{
    goForward() {
      this.$router.go(-1)
    },
    getBackpaymentInfo() {
      this.$http.get('/fi/backpayments/' + this.$route.params.id).then((res) => {
        this.mes = res.data.returnValue
      })
    }
  },
  mounted() {
    this.getBackpaymentInfo()
  }
}
</script>
